﻿<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Microsoft Player Framework Samples - WebVTT Captions</title>

        <link href="webvtt.css" rel="stylesheet" />
        <script src="/js/data.js"></script>
        <script src="webvtt.js"></script>
    </head>
    <body>
        <div class="fragment webvtt">
            <header class="page-header" aria-label="Header content" role="banner">
                <button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle"></span>
                </h1>
            </header>
            <section class="content" aria-label="Main content" role="main">
                <div data-win-control="PlayerFramework.MediaPlayer" data-win-options="{
                    width: 640,
                    height: 360,
                    autoplay: true,
                    isCaptionsVisible: true,
                    src: 'http://smf.blob.core.windows.net/samples/win8/captions/movie.mp4',
                    tracks: [
                        {
                            kind: 'subtitles',
                            label: 'English',
                            src: 'http://smf.blob.core.windows.net/samples/win8/captions/captions.vtt',
                            srclang: 'en',
                            default: true
                        },
                        {
                            kind: 'subtitles',
                            label: 'German',
                            src: 'http://smf.blob.core.windows.net/samples/win8/captions/de-captions.vtt',
                            srclang: 'de'
                        }
                    ],
                    captionsPlugin: {
                        isEnabled: false
                    }
                }"></div>
            </section>
        </div>
    </body>
</html>